<template>
  <div v-loading="pluginLoading" class="container">
    <!-- 插件标题和版本 -->
    <div class="title-bar">
      <h1>{{ pluginStore.pluginInfo?.name }}</h1>
      <span class="version">{{ pluginStore.pluginInfo?.version }}</span>
    </div>

    <!-- 登录状态显示 -->
    <template v-if="isLogin">
      <div class="user-status">
        <div class="user-info">
          <el-avatar :icon="User" class="avatar" />
          <span class="username">{{ username || "用户" }}</span>
        </div>
        <el-button
          type="text"
          size="small"
          class="logout-btn"
          @click="handleLogout"
        >
          退出登录
        </el-button>
      </div>

      <div class="template-section">
        <div class="template-header">
          <span class="template-title">采集温馨提示</span>
        </div>
        <ul
          style="
            margin: 8px 0 0 16px;
            padding: 0 0 0 2px;
            font-size: 13px;
            color: #666;
          "
        >
          <li style="margin-bottom: 3px">
            <span style="color: #3498db">1.</span>
            选择采集站点对应的<strong>代理</strong>可加快采集速度
          </li>
          <li style="margin-bottom: 3px">
            <span style="color: #3498db">2.</span>
            发货地址请选择采集站点对应的<strong>地址</strong>，避免采集不到价格
          </li>
          <li style="color: #ff2700a6">
            <span>3.</span>
            请务必选择站点对应<strong style="color: #ff0000; font-weight: 600"
              >语言</strong
            >，否则可能出现严重数据错误
          </li>
          <li style="color: #ff2700a6">
            <span>4.</span>
            请务必选择站点对应<strong style="color: #ff0000; font-weight: 600"
              >币种</strong
            >，否则价格将无法正确采集
          </li>
          <li style="color: #ff2700a6">
            <span>5.</span>
            （操作）可以在打开新标签采集其他商品或者在当前标签继续搜索其他商品(当前标签搜索不推荐，原因<ByTooltip
              content="每个站点的第一个标签最好不要关闭，否则当前正在采集的商品可能会采集失败"
            />)
          </li>
        </ul>
      </div>

      <div class="template-section">
        <div class="template-header">
          <span class="template-title">采集发布配置</span>
        </div>

        <div class="template-content-group">
          <div class="template-content-item">
            <div class="template-content-label">
              <ByTooltip content="采集成功后将根据选择的模板进行认领并上架" />
              <span>认领发布模版</span>
              <el-button
                size="small"
                @click="handleGetClaimTemplateOptions"
                style="margin-left: 8px"
                :loading="claimTemplateOptionsLoading"
                circle
              >
                <el-icon><Refresh /></el-icon>
              </el-button>
            </div>
            <el-select
              v-model="pendingClaimTemplate"
              @change="handleClaimTemplateChange"
              placeholder="请选择自动认领发布模版"
              class="template-select"
              :loading="claimTemplateOptionsLoading"
              multiple
            >
              <el-option
                v-for="item in claimTemplateOptions"
                :key="item.id"
                :value="item.id"
                :label="item.configName"
              />
              <template #empty>
                <div class="no-template-tip">
                  <span>暂无自动认领发布模版</span>
                  <ByTooltip
                    content="请到爆蚁ERP-采集-认领配置模板中新增认领配置模板。点击跳转"
                    placement="top"
                  >
                    <el-link
                      href="https://java.baoyierp.com/collect/claim_template"
                      target="_blank"
                      type="primary"
                      :underline="false"
                      style="margin-left: 6px"
                      >去新增</el-link
                    >
                  </ByTooltip>
                </div>
              </template>
            </el-select>
          </div>

          <div class="template-content-item">
            <div class="template-content-label">
              <ByTooltip
                content="设置每个商品最多采集的SKU数量避免SKU过多导致采集速度过慢"
              />
              <span>采集商品SKU最大数量</span>
            </div>
            <el-input-number
              v-model="collectConfig.maxSkuCount"
              :min="1"
              :max="500"
              :step="10"
              placeholder="请输入最大SKU数量"
              class="template-input-number"
            />
          </div>

          <div class="template-content-item">
            <ByTooltip
              content="若为0则不过滤,以该商品所有SKU数量进行判断，于“采集SKU最大数量”无关"
            />
            <div class="template-content-label">
              <span>过滤SKU数量小于</span>
            </div>
            <el-input-number
              v-model="collectConfig.skuNumberLessThan"
              :min="0"
              :step="1"
            />
            <div class="template-content-label">
              <span>的商品</span>
            </div>
          </div>

          <div class="template-content-item">
            <div class="template-content-label">
              <ByTooltip
                content="开启后将过滤掉需要报关的商品，只采集不需要报关的商品"
              />
              <span>过滤需要报关的商品</span>
            </div>
            <el-switch
              v-model="collectConfig.filterCustomsDeclarationGoods"
              active-text="开启"
              inactive-text="关闭"
              class="template-switch"
            />
          </div>
          <!-- <div class="template-content-item">
            <div class="template-content-label">
              <span>是否包含运费</span>
            </div>
            <el-switch
              v-model="collectConfig.filterIncludingShipping"
              active-text="包含"
              inactive-text="不包含"
              class="template-switch"
            />
          </div> -->
          <div class="template-content-item">
            <ByTooltip content="若为0则不过滤评分" />
            <div class="template-content-label">
              <span>过滤评分小于</span>
            </div>
            <el-input-number
              v-model="collectConfig.filterScoreLessThan"
              :min="0"
              :max="5"
              :step="0.1"
            />
            <div class="template-content-label">
              <span>的商品</span>
            </div>
          </div>
          <div class="template-content-item">
            <div class="template-content-label">
              <span>到货时间</span>
            </div>
            <ByRadio
              v-model="collectConfig.collectDeliverTimeMethod"
              :options="collectDeliverTimeMethodOptions"
              value-key="value"
            />
          </div>
          <div class="template-content-item">
            <ByTooltip content="若为0则不过滤到货时间" />
            <div class="template-content-label">
              <span>过滤到货时间超过</span>
            </div>
            <el-input-number
              v-model="collectConfig.collectDeliverTime"
              :min="0"
              :step="1"
              :precision="0"
            />
            <div class="template-content-label">
              <span>天的商品</span>
            </div>
          </div>
          <div class="template-content-item">
            <div class="template-content-label">
              <span>勾选需要采集的发货模式</span>
            </div>
            <div>
              <ByCheckbox
                v-model="collectConfig.filterDeliverMethod"
                :options="collectDeliverMethodOptions"
                value-key="value"
              >
                <template #default="{ row }">
                  {{ row.label }}
                  <ByTooltip :content="row.tips" />
                </template>
              </ByCheckbox>
            </div>
          </div>
          <!-- <div class="template-content-item">
            <div class="template-content-label">
              <span>采集价格</span>
            </div>
            <ByRadio
              v-model="collectConfig.collectPriceType"
              :options="collectPriceOptions"
              value-key="value"
            />
          </div> -->
          <div>
            <div class="template-content-label">
              <span>限制区间价格</span>
            </div>
            <div class="input-number-ranger-wrapper">
              <el-input-number
                v-model="collectConfig.collectMinPrice"
                :min="0"
                :max="collectConfig.collectMaxPrice"
                :step="10"
              />
              至
              <el-input-number
                v-model="collectConfig.collectMaxPrice"
                :min="collectConfig.collectMinPrice"
                :step="10"
              />
            </div>
          </div>
        </div>
      </div>

      <div class="template-section">
        <div class="template-header">
          <span class="template-title"> 多关键词采集 </span>
          <el-link
            v-if="collectMultiKeywordList.length"
            type="primary"
            :underline="false"
          >
            已添加{{ collectMultiKeywordList.length }}个关键词
          </el-link>
        </div>
        <div class="template-content-group">
          <div
            v-if="isCollecting && collectMultiKeywordList.length"
            class="template-content-item"
          >
            <div class="template-content-label">
              <span>采集进度</span>
            </div>
            <div class="template-content-full-item">
              <el-progress :percentage="collectProgressPercentage" />
            </div>
          </div>
          <div class="template-content-item">
            <div class="template-content-label">
              <span>采集站点</span>
            </div>
            <el-select
              v-model="multiKeywordCollectData.siteUrl"
              placeholder="请选择采集站点"
            >
              <el-option
                v-for="option in sites"
                :key="option.value"
                :value="option.url"
                :label="option.label"
              />
            </el-select>
          </div>
          <div class="template-content-item">
            <div class="template-content-label">
              <span>采集页数</span>
            </div>
            <el-input-number
              v-model="multiKeywordCollectData.multiKeywordPage"
              :min="1"
              :step="1"
              style="width: 100%"
            />
          </div>
          <el-input
            v-model="multiKeywordCollectData.multiKeywordCollection"
            placeholder="多个关键词，支持回车分隔"
            type="textarea"
            :rows="3"
          />

          <el-button
            type="primary"
            @click="handleStartMultiCollect"
            :loading="multiKeywordCollectLoading"
          >
            开始多关键词采集
          </el-button>
        </div>
      </div>
    </template>

    <!-- 登录表单 -->
    <el-card class="auth-card" v-if="!isLogin">
      <div class="title">账号登录</div>
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
      >
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            placeholder="用户名"
            prefix-icon="User"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="密码"
            prefix-icon="Lock"
            @keyup.enter="handleLogin()"
          />
        </el-form-item>
        <el-form-item prop="loginEntrance">
          <el-select v-model="loginForm.loginEntrance">
            <el-option
              v-for="item in loginEntranceOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="login-btn"
            @click="handleLogin()"
            :loading="loginLoading"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <OutLoginDeviceReplaceDialog
      ref="outLoginDeviceReplaceDialogRef"
      @confirm="handleLogin"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref, reactive, computed, watch } from "vue";
import type { Ref } from "vue";
import { usePluginStore } from "@/store/modules/plugin";
import { User, Refresh } from "@element-plus/icons-vue";
import { useResetRef } from "@/hooks";
import { useUserStore } from "@/store/modules/user";
import { checkTokenExpired, sendMessage } from "@/utils/tools";
import OutLoginDeviceReplaceDialog from "@/components/OutLoginDeviceReplaceDialog.vue";
import { selectList } from "@/api/common";
import ByTooltip from "@/components/By/ByTooltip.vue";
import ByRadio from "@/components/By/ByRadio.vue";
import ByCheckbox from "@/components/By/ByCheckbox.vue";
import { MAX_SPU_COLLECT_SKU_COUNT } from "@/constants/collect";
import { ElMessage, ElMessageBox } from "element-plus";
import type { CollectConfig, TMultiKeywordCollectData } from "@/type/collect";
import { cloneDeep } from "lodash-es";
import PollingManager from "@/class/PollingManager";

const pluginStore = usePluginStore();
const userStore = useUserStore();
const outLoginDeviceReplaceDialogRef = ref();

const loginLoading = ref(false);
const loginForm = useResetRef({
  username: "",
  password: "",
  loginEntrance: "GOODS_COLLECT_PLUGIN",
});

const loginEntranceOptions = [
  {
    label: "免费版",
    value: "GOODS_COLLECT_PLUGIN",
  },
  {
    label: "自动化采集发布",
    value: "AUTOMATED_COLLECT_PLUGIN",
  },
];

const loginRules = reactive({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});
const loginFormRef = ref();

const pluginLoading = ref(false);

const isCollecting = ref(false);
const collectMultiKeywordList: Ref<string[]> = ref([]);
const collectCountMap = ref({
  current: 0,
  total: 0,
  failed: 0,
  skipped: 0,
});

const getCollectCountPolling = new PollingManager(5 * 1000, () => {
  return sendMessage({
    action: "getCollectCountMap",
  }).then((data: any) => {
    collectCountMap.value = cloneDeep(data);
  });
});

const sites = ref([
  {
    label: "美国",
    value: "USA",
    url: "https://www.amazon.com",
  },
  {
    label: "日本",
    value: "JPN",
    url: "https://www.amazon.co.jp",
  },
  {
    label: "墨西哥",
    value: "MEX",
    url: "https://www.amazon.com.mx",
  },
  {
    label: "加拿大",
    value: "CAN",
    url: "https://www.amazon.ca",
  },
  {
    label: "澳大利亚",
    value: "AUS",
    url: "https://www.amazon.com.au",
  },
  {
    label: "沙特阿拉伯",
    value: "SAU",
    url: "https://www.amazon.sa",
  },
  {
    label: "德国",
    value: "DEU",
    url: "https://www.amazon.de",
  },
  {
    label: "法国",
    value: "FRA",
    url: "https://www.amazon.fr",
  },
]);

const claimTemplateOptionsLoading = ref(false);
const claimTemplateOptions: Ref<any[]> = ref([]);
const pendingClaimTemplate = ref<string[]>([]);

const collectConfig = ref<CollectConfig>({
  claimTemplate: [],
  maxSkuCount: MAX_SPU_COLLECT_SKU_COUNT,
  filterCustomsDeclarationGoods: false,
  filterIncludingShipping: false,
  collectPriceType: "originalPrice",
  filterScoreLessThan: 3.5,
  collectDeliverTimeMethod: "nonMember",
  filterDeliverMethod: ["AMZ", "FBA", "FBM"],
  collectDeliverTime: 5,
  collectMinPrice: 1,
  collectMaxPrice: 100,
  isManualCollect: false,
  skuNumberLessThan: 5,
});
const multiKeywordCollectData = useResetRef<TMultiKeywordCollectData>({
  // 多关键词
  multiKeywordCollection: "",
  multiKeywordPage: 5,
  siteUrl: "",
  multiKeywordCollectionList: [],
});
const multiKeywordCollectLoading = ref(false);

const collectPriceOptions = [
  {
    label: "原价",
    value: "originalPrice",
  },
  {
    label: "活动价格",
    value: "activePrice",
  },
];
const collectDeliverTimeMethodOptions = [
  {
    label: "非会员",
    value: "nonMember",
  },
  {
    label: "会员",
    value: "member",
  },
];
const collectDeliverMethodOptions = [
  {
    label: "AMZ",
    tips: "亚马逊自营+发货",
    value: "AMZ",
  },
  {
    label: "FBA",
    tips: "商家自营，亚马逊发货",
    value: "FBA",
  },
  {
    label: "FBM",
    tips: "商家自营+发货",
    value: "FBM",
  },
];

const isLogin = computed(() => userStore.isLogin);
const username = computed(() => userStore.userInfo?.username);
const collectProgressPercentage = computed(() => {
  const {
    current = 0,
    total = 0,
    failed = 0,
    skipped = 0,
  } = collectCountMap.value || {};
  return Number((((current + failed + skipped) / total || 0) * 100).toFixed(2));
});
const isAutoPublish = computed(() => {
  return loginForm.value.loginEntrance === "AUTOMATED_COLLECT_PLUGIN";
});

const handleClaimTemplateChange = (value: any) => {
  const claimTemplateArray = Array.isArray(collectConfig.value.claimTemplate)
    ? collectConfig.value.claimTemplate
    : [];
  const previousValue = [...claimTemplateArray];

  ElMessageBox.confirm(
    `确认模版后将自动发布到对应店铺，且无法取消，请确认配置？<br/><br/>已选择的模板：${value
      .map((id: any) => {
        const option = claimTemplateOptions.value.find((opt) => opt.id == id);
        return option ? option.configName : `模板${id}`;
      })
      .join("、")}`,
    "确认选择认领发布模板",
    {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
      dangerouslyUseHTMLString: true,
    }
  )
    .then(() => {
      collectConfig.value.claimTemplate = value as string[];
      pendingClaimTemplate.value = value;
    })
    .catch(() => {
      collectConfig.value.claimTemplate = previousValue;
      pendingClaimTemplate.value = previousValue;
    });
};

const handleSetStorageData = () => {
  chrome.storage.sync.get(["baoyiplus_collectConfig"]).then((storageData) => {
    const { baoyiplus_collectConfig } = storageData;
    if (baoyiplus_collectConfig) {
      const config = baoyiplus_collectConfig;
      const { claimTemplate, filterDeliverMethod, ...otherConfig } = config;
      const claimTemplateArray: string[] = Array.isArray(claimTemplate)
        ? claimTemplate
        : typeof claimTemplate === "string"
        ? claimTemplate.split(",")
        : [];
      const filterDeliverMethodArray: string[] = Array.isArray(
        filterDeliverMethod
      )
        ? (filterDeliverMethod as string[])
        : typeof filterDeliverMethod === "string"
        ? filterDeliverMethod.split(",")
        : [];

      Object.assign(collectConfig.value, {
        ...otherConfig,
        claimTemplate: claimTemplateArray,
        filterDeliverMethod: filterDeliverMethodArray,
      });
    }
  });
};

const handleGetClaimTemplateOptions = () => {
  claimTemplateOptionsLoading.value = true;
  selectList("goods-collect", "renlingConfig")
    .then((res) => {
      claimTemplateOptions.value = res.data;

      const claimTemplateArray = Array.isArray(
        collectConfig.value.claimTemplate
      )
        ? collectConfig.value.claimTemplate
        : [];
      collectConfig.value.claimTemplate = claimTemplateArray.filter(
        (item: string) => {
          return claimTemplateOptions.value.some((option) => {
            return Number(item) === Number(option.id);
          });
        }
      );
      pendingClaimTemplate.value = collectConfig.value
        .claimTemplate as string[];
    })
    .finally(() => {
      claimTemplateOptionsLoading.value = false;
    });
};

const afterLogin = async () => {
  await handleSetStorageData();
  handleGetClaimTemplateOptions();
};

const tryAutoLogin = () => {
  pluginLoading.value = true;
  chrome.storage.sync
    .get(["baoyiplus_accessToken", "baoyiplus_expiresIn"])
    .then(async (storageData) => {
      const { baoyiplus_accessToken, baoyiplus_expiresIn } = storageData;
      if (baoyiplus_accessToken && !checkTokenExpired(baoyiplus_expiresIn)) {
        await userStore.getUserInfo();
        await afterLogin();
      }
      pluginLoading.value = false;
    })
    .finally(() => {
      pluginLoading.value = false;
    });
};

const openOutLoginDeviceReplaceDialog = (loginLogs: any) => {
  outLoginDeviceReplaceDialogRef.value.openDialog(loginLogs);
};

const handleLogin = async (logOutId = "") => {
  const valid = await loginFormRef.value.validate();
  if (!valid) return;

  const params: any = {
    ...loginForm.value,
  };
  if (logOutId) {
    params.logOutId = logOutId;
    params.forceLogin = true;
  }
  loginLoading.value = true;
  return userStore
    .handleLogin(params)
    .then(() => {
      userStore.getUserInfo();
      loginForm.reset();
      afterLogin();
    })
    .catch((error) => {
      const code = error.response?.data?.code;
      const loginLogs = Object.values(error.response?.data?.paramMap || {});
      if (code === 409 && loginLogs.length) {
        openOutLoginDeviceReplaceDialog(loginLogs);
      }
    })
    .finally(() => {
      loginLoading.value = false;
    });
};

function handleStartMultiCollect() {
  const { siteUrl, multiKeywordCollection, multiKeywordPage } =
    multiKeywordCollectData.value;
  if (!siteUrl) {
    ElMessage.error("请选择采集站点");
    return;
  }
  if (!multiKeywordCollection) {
    ElMessage.error("请输入采集关键词");
    return;
  }
  if (!multiKeywordPage) {
    ElMessage.error("请输入采集页数");
    return;
  }
  const keywords = multiKeywordCollection
    .split(/\r?\n/) // 只按真实的换行符分隔，不包括自动折行
    .map((k) => k.trim())
    .filter((k) => k);
  const payload = {
    collectConfig: cloneDeep(collectConfig.value),
    multiKeywordCollectData: cloneDeep({
      ...multiKeywordCollectData.value,
      multiKeywordCollectionList: keywords,
    }),
  };

  collectMultiKeywordList.value.push(...(keywords || []));

  multiKeywordCollectLoading.value = true;
  multiKeywordCollectData.reset();
  sendMessage({
    action: "startMultiKeywordCollect",
    data: payload,
  }).finally(() => {
    ElMessage.success(
      `成功添加${keywords.length}个关键词，关键词采集的商品将逐步添加到“总商品数量”`
    );
    multiKeywordCollectLoading.value = false;
  });
}

const handleLogout = async () => {
  pluginLoading.value = true;
  await userStore.handleLogout();
  pluginLoading.value = false;
};

watch(
  () => collectConfig.value,
  (newVal) => {
    const { claimTemplate, filterDeliverMethod } = newVal;
    const claimTemplateStr = Array.isArray(claimTemplate)
      ? claimTemplate.join(",")
      : claimTemplate || "";
    const filterDeliverMethodStr = Array.isArray(filterDeliverMethod)
      ? filterDeliverMethod.join(",")
      : filterDeliverMethod || "";
    chrome.storage.sync.set({
      baoyiplus_collectConfig: {
        ...newVal,
        claimTemplate: claimTemplateStr,
        filterDeliverMethod: filterDeliverMethodStr,
      } as unknown as CollectConfig,
    });
  },
  { deep: true }
);

watch(
  () => isCollecting.value,
  (newVal) => {
    if (newVal) {
      getCollectCountPolling.start();
    } else {
      getCollectCountPolling.stop();
    }
  }
);

// 监听来自 background 的采集开始消息
const messageListener = (message: any) => {
  const { action, status } = message;
  if (action === "collectStatusChange") {
    if (status === "start") {
      isCollecting.value = true;
    } else if (status === "end") {
      isCollecting.value = false;
      collectMultiKeywordList.value = [];
    }
  }
};

onMounted(() => {
  pluginStore.getPluginInfo();
  tryAutoLogin();

  // 添加消息监听器
  chrome.runtime.onMessage.addListener(messageListener);
});

onUnmounted(() => {
  // 移除消息监听器
  chrome.runtime.onMessage.removeListener(messageListener);
});
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  min-height: 100vh;
  padding: 16px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  box-sizing: border-box;

  @media (max-width: 480px) {
    padding: 12px;
  }

  & > * + * {
    margin-top: 10px;
  }
}

.title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);

  h1 {
    font-size: 20px;
    margin: 0;
    color: #2c3e50;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;

    @media (max-width: 480px) {
      font-size: 18px;
    }
  }

  .version {
    font-size: 12px;
    color: #7f8c8d;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 4px 10px;
    border-radius: 16px;
    font-weight: 500;
    align-self: flex-start;
    white-space: nowrap;

    @media (max-width: 480px) {
      font-size: 11px;
      padding: 3px 8px;
    }
  }

  @media (max-width: 480px) {
    padding: 16px;
    gap: 8px;
  }
}

.user-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);

  .user-info {
    display: flex;
    align-items: center;
    gap: 12px;

    .avatar {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      width: 40px;
      height: 40px;
    }

    .username {
      font-size: 16px;
      font-weight: 600;
      color: #2c3e50;
    }
  }

  .logout-btn {
    color: #7f8c8d;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.3s ease;

    &:hover {
      color: #e74c3c;
      background: rgba(231, 76, 60, 0.1);
    }
  }
}

.auth-card {
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);

  .title {
    font-size: 24px;
    font-weight: 600;
    color: #2c3e50;
    text-align: center;
    margin-bottom: 8px;
  }

  .login-form {
    margin-top: 20px;
  }
}

.el-form {
  .label-wrapper {
    display: flex;
    align-items: center;
  }

  :deep(.el-form-item) {
    margin-bottom: 24px;
  }

  :deep(.el-form-item__content) {
    & > * {
      width: 100%;
    }
  }

  :deep(.el-input__wrapper),
  :deep(.el-select__wrapper) {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    &.is-focus {
      box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
      border-color: #667eea;
    }
  }

  :deep(.el-button) {
    border-radius: 12px;
    font-weight: 600;
    padding: 12px 24px;
    font-size: 16px;
    transition: all 0.3s ease;

    &.el-button--primary {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border: none;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
      }
    }
  }
}

.template-section {
  padding: 10px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);

  .template-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;

    .template-title {
      font-size: 16px;
      font-weight: 600;
      color: #2c3e50;
    }
  }

  .template-content-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .template-content-item {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .template-content-label {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 14px;
    font-weight: 500;
    color: #2c3e50;
    flex-shrink: 0;
  }

  .template-content-full-item {
    width: 100%;
  }

  .template-select {
    width: 100%;

    :deep(.el-select__wrapper) {
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      border: 1px solid rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      &.is-focus {
        box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
        border-color: #667eea;
      }
    }
  }

  .template-input-number {
    width: 100%;

    :deep(.el-input-number) {
      width: 100%;
    }

    :deep(.el-input__wrapper) {
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      border: 1px solid rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      &.is-focus {
        box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
        border-color: #667eea;
      }
    }
  }

  .template-switch {
    :deep(.el-switch) {
      .el-switch__core {
        border-radius: 20px;
        background-color: #dcdfe6;
        border: 1px solid #dcdfe6;
        transition: all 0.3s ease;

        &:after {
          border-radius: 50%;
          transition: all 0.3s ease;
        }
      }

      &.is-checked .el-switch__core {
        background-color: #667eea;
        border-color: #667eea;
      }
    }

    :deep(.el-switch__label) {
      font-size: 14px;
      font-weight: 500;
      color: #2c3e50;
    }
  }
}

.collect-progress-section {
  margin-bottom: 20px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(102, 126, 234, 0.2);

  .progress-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;

    .progress-title {
      font-size: 16px;
      font-weight: 600;
      color: #2c3e50;
    }

    .progress-icon {
      color: #667eea;
      animation: spin 1s linear infinite;
    }

    .success-icon {
      color: #52c41a;
    }
  }

  .progress-content {
    .progress-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;

      .progress-label {
        font-size: 14px;
        color: #7f8c8d;
      }

      .progress-value {
        font-weight: 600;
        font-size: 16px;

        &.current {
          color: #667eea;
        }

        &.total {
          color: #2c3e50;
        }
      }
    }

    .progress-bar {
      width: 100%;
      height: 8px;
      background: rgba(102, 126, 234, 0.1);
      border-radius: 4px;
      overflow: hidden;
      margin-top: 12px;

      .progress-fill {
        height: 100%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 4px;
        transition: width 0.3s ease;
      }
    }

    .success-message {
      margin-top: 16px;
      padding: 16px;
      background: rgba(82, 196, 26, 0.1);
      border-radius: 8px;
      border: 1px solid rgba(82, 196, 26, 0.2);

      .success-text {
        font-size: 14px;
        color: #2c3e50;
        margin-bottom: 12px;

        .success-count {
          font-weight: 600;
          color: #52c41a;
          font-size: 16px;
        }
      }

      .clear-btn {
        background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
        border: none;
        border-radius: 6px;
        font-weight: 500;

        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
        }
      }
    }
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.btn-wrapper {
  width: 100%;
  .el-button {
    width: 100%;
  }
}

.by-checkbox-container {
  :deep(.el-checkbox-group) {
    gap: 0;
  }
  :deep(.el-checkbox) {
    margin-right: 5px !important;
  }
}
.input-number-ranger-wrapper {
  display: flex;
  align-items: center;
  gap: 5px;
}

// .strong-warning {
//   display: flex;
//   align-items: center;
//   padding: 5px;
//   background: #fff2e8;
//   color: #d4380d;
//   border: 2px solid #fa541c;
//   border-radius: 6px;
//   font-size: 16px;
//   font-weight: bold;
//   margin-bottom: 10px;
//   box-shadow: 0 2px 6px 0 rgba(250, 84, 28, 0.06);
// }
// .strong-warning__icon {
//   font-size: 24px;
//   margin-right: 10px;
// }
// .strong-warning__text {
//   flex: 1;
// }
</style>
